<template>
  <el-header style="height: 60px;">
    <el-menu :default-active="activeIndex" style="justify-content: center;background-color: black; border-bottom: 0px solid;" mode="horizontal" @select="handleMenuSelect">
      <img style="width: 150px; height: 80px; margin-top: -5px;" src="../assets/logo_transparent.png" />
      <router-link to="/HelloWorld">
        <el-menu-item style="color: white;" index="HelloWorld">首页</el-menu-item>
      </router-link>
      <router-link to="/counterattack">
        <el-menu-item style="color: white;" index="counterattack">电影</el-menu-item>
      </router-link>
      <router-link to="/sweet">
        <el-menu-item style="color: white;" index="sweet">电视剧</el-menu-item>
      </router-link>
      <router-link to="/rebirth">
        <el-menu-item style="color: white;" index="rebirth">动漫</el-menu-item>
      </router-link>
      <router-link to="/Variety">
        <el-menu-item style="color: white;" index="Variety">综艺</el-menu-item>
      </router-link>
      <router-link to="/Entertainment">
        <el-menu-item style="color: white;" index="Entertainment">娱乐新闻</el-menu-item>
      </router-link>
      <router-link to="/sheet">
        <el-menu-item style="color: white;" index="sheet">片单</el-menu-item>
      </router-link>
      <div class="search-container">
        <el-input
          v-model="searchQuery"
          class="search-input"
          size="large"
          placeholder="搜索你感兴趣的内容"
          :prefix-icon="Search"
        />
        <el-button 
          @click="search" 
          class="search-button"
          type="primary">
          <el-icon><Search /></el-icon>
        </el-button>
      </div>
      <div v-if="isLoggedIn" class="user-profile">
        <el-dropdown trigger="click" class="custom-dropdown">
          <div class="avatar-container">
            <el-avatar 
              :size="32"
              :icon="UserFilled"
              class="user-avatar"
            />
            <span class="user-name">{{ userName }}</span>
            <el-icon class="dropdown-icon"><CaretBottom /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu class="custom-dropdown-menu">
              <el-dropdown-item @click="Sidebar">
                <el-icon><User /></el-icon>
                <span>我的信息</span>
              </el-dropdown-item>
              <el-dropdown-item @click="logout">
                <el-icon><SwitchButton /></el-icon>
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <el-text v-else class="login" @click="login">登录</el-text>
      <el-popover
        placement="bottom-end"
        :width="300"
        trigger="click"
        :hide-after="0"
        popper-class="watch-history-popover"
        :teleported="false"
        :show-arrow="false"
        :offset="0"
      >
        <template #reference>
          <div class="watch-trigger">
            <el-icon><VideoPlay /></el-icon>
            <span>观看记录</span>
          </div>
        </template>
        
        <div class="watch-content">
          <div class="watch-header">最近观看</div>
          <el-scrollbar height="300px">
            <div v-if="recordsList.length > 0" class="records-list">
              <div v-for="(drama, index) in recordsList" 
                   :key="index" 
                   class="record-item"
                   @click="recordsDetails(drama.id, drama.name)">
                <div class="record-info">
                  <div class="record-title">{{ drama.name }}</div>
                </div>
                <el-icon class="record-arrow"><ArrowRight /></el-icon>
              </div>
            </div>
            <div v-else class="empty-records">
              暂无观看记录
            </div>
          </el-scrollbar>
        </div>
      </el-popover>
    </el-menu>
  </el-header>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { UserFilled, Search, VideoPlay, ArrowRight, CaretBottom, User, SwitchButton } from '@element-plus/icons-vue';
import request from '@/utils/request';
import axios from 'axios';

const userName = localStorage.getItem('userName');
const router = useRouter();
const searchQuery = ref('');
const isLoggedIn = ref(false);
const recordsList = ref([]);
isLoggedIn.value = localStorage.getItem('isLoggedIn'); // 控制登录状态

const search = () => {
  if (searchQuery.value.trim() !== '') {
    router.push({ name: 'search', params: { searchQuery: searchQuery.value } });
  }
};

// 观看记录
const records = async () => {
  try {
    const res = await request.post('/records/findAll', {
      username: userName,
    });
    recordsList.value = res.data.data;
  } catch (error) {
    console.error('Error fetching records:', error);
  }
};

// 观看记录跳转
const recordsDetails = async (dramaId, name) => {
  router.push({ name: 'VideoStory', params: { id: dramaId, name: name } });
};

const login = () => {
  router.push('/login');
};

const logout = async () => {
  try {
    const token = localStorage.getItem('token');
    const config = {
      headers: {
        token: `${token}`,
        'Content-Type': 'application/json',
      },
    };

    await axios.get('http://localhost:9090/api/user/logout', config);
    isLoggedIn.value = false;
    localStorage.removeItem('isLoggedIn');
    localStorage.removeItem('userName');
    localStorage.removeItem('token');
    records();
  } catch (error) {
    console.error('Logout failed:', error);
  }
};

const Sidebar = () => {
  router.push('/Sidebar');
};

onMounted(() => {
  records();
});
</script>

<style>
/* 全局样式覆盖 */
.el-popper.is-pure {
  background: #1f1f1f !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
</style>

<style scoped>
.el-input--large .el-input__wrapper {
  background-color: black;
}
.demo-type {
  display: flex;
}
.login {
  cursor: pointer;
  color: white;
  margin-left: 10px;
  position: relative;
}
.watch-record-box {
  position: absolute;
  top: 100%;
  right: 0;
  width: 300px;
  background-color: #1f1f1f;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  margin-top: 12px;
  overflow: hidden;
}
.watch-record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
  font-weight: 500;
}
.records-list {
  padding: 8px 0;
}
.record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.record-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.record-content {
  flex: 1;
}
.record-title {
  color: white;
  font-size: 14px;
}
.record-arrow {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  transition: transform 0.3s ease;
}
.record-item:hover .record-arrow {
  transform: translateX(4px);
  color: #FF416C;
}
.empty-records {
  padding: 32px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}
.custom-dropdown .dropdown-label {
  cursor: pointer;
  color: white;
  margin-left: 10px;
}
.records {
  color: black;
  list-style-type: disc;
  padding-left: 20px;
  text-decoration: underline;
  cursor: pointer;
  margin-bottom: 10px;
}
.records:hover {
  color: red;
}
/* 观看记录样式 */
.watch-history-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  transition: all 0.3s ease;
  margin-left: 20px;
}
.watch-history-trigger:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.watch-history-popover {
  --el-popover-bg-color: #1f1f1f !important;
  --el-popover-border-color: transparent !important;
  --el-popover-padding: 0 !important;
}

:deep(.el-popper) {
  border: none !important;
  padding: 0 !important;
  background: #1f1f1f !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

:deep(.el-popper.is-light) {
  border: none !important;
  background: #1f1f1f !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

:deep(.el-popper__arrow) {
  display: none !important;
}

:deep(.el-popover) {
  --el-popover-bg-color: #1f1f1f !important;
  --el-popover-border-color: transparent !important;
  --el-popover-padding: 0 !important;
  background: #1f1f1f !important;
  border: none !important;
  padding: 0 !important;
}

.watch-content {
  background: #1f1f1f;
  color: white;
  padding: 0;
}

.watch-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
  font-weight: 500;
}
.watch-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  transition: all 0.3s ease;
}
.watch-trigger:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.watch-content .records-list {
  padding: 8px 0;
}
.watch-content .record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.watch-content .record-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.watch-content .record-info {
  flex: 1;
}
.watch-content .record-title {
  color: white;
  font-size: 14px;
}
.watch-content .record-arrow {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  transition: transform 0.3s ease;
}
.watch-content .record-item:hover .record-arrow {
  transform: translateX(4px);
  color: #FF416C;
}
.watch-content .empty-records {
  padding: 32px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

/* 添加全局样式覆盖 */
:global(.el-popper.is-light) {
  background: #1f1f1f !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

:global(.el-popper.el-popover) {
  background: #1f1f1f !important;
  border: none !important;
  padding: 0 !important;
}

:global(.el-popper__arrow) {
  display: none !important;
}

.watch-history-popover {
  --el-popover-bg-color: #1f1f1f !important;
  --el-popover-border-color: transparent !important;
  --el-popover-padding: 0 !important;
}

:deep(.el-popper) {
  border: none !important;
  padding: 0 !important;
  background: #1f1f1f !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

:deep(.el-popper.is-light) {
  border: none !important;
  background: #1f1f1f !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

:deep(.el-popover) {
  --el-popover-bg-color: #1f1f1f !important;
  --el-popover-border-color: transparent !important;
  --el-popover-padding: 0 !important;
  background: #1f1f1f !important;
  border: none !important;
  padding: 0 !important;
}

.search-container {
  display: flex;
  align-items: center;
  margin-left: 20px;
  height: 60px;
}

.search-input {
  width: 240px;
}

.search-input :deep(.el-input__wrapper) {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  box-shadow: none;
  height: 32px;
  padding: 0 8px;
}

.search-input :deep(.el-input__wrapper):hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.search-input :deep(.el-input__wrapper.is-focus) {
  border-color: var(--el-color-primary);
  box-shadow: none;
}

.search-input :deep(.el-input__inner) {
  color: white;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}

.search-input :deep(.el-input__prefix) {
  color: rgba(255, 255, 255, 0.7);
}

.search-input :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.5);
}

.search-button {
  margin-left: 4px;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.search-button .el-icon {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.search-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

/* 用户头像和下拉菜单样式 */
.user-profile {
  margin-left: 20px;
  height: 60px;
  display: flex;
  align-items: center;
}

.avatar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.avatar-container:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-avatar {
  background: linear-gradient(45deg, #FF416C, #FF4B2B);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.avatar-container:hover .user-avatar {
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.user-name {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.dropdown-icon {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  transition: transform 0.3s ease;
}

.avatar-container:hover .dropdown-icon {
  transform: translateY(2px);
}

:deep(.custom-dropdown-menu) {
  background-color: white !important;
  border: none !important;
  padding: 4px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}

:deep(.el-dropdown-menu__item) {
  color: #333333 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 2px 0 !important;
}

:deep(.el-dropdown-menu__item:hover) {
  background-color: #f5f7fa !important;
  color: var(--el-color-primary) !important;
}

:deep(.el-dropdown-menu__item .el-icon) {
  font-size: 16px !important;
  color: #666666 !important;
}

:deep(.el-dropdown-menu__item:hover .el-icon) {
  color: var(--el-color-primary) !important;
}

:deep(.el-dropdown-menu__item span) {
  color: #333333 !important;
}

:deep(.el-dropdown-menu__item:hover span) {
  color: var(--el-color-primary) !important;
}
</style>
